<template>
  <div class="table-pannel">
    <div class="table-header">
      <div class="table-header-title">
        {{ title }}
      </div>
      <div class="table-header-tools">
        <slot name="header-tools"></slot>
      </div>
    </div>
    <div class="table-tools">
      <div class="table-condition">
        <slot name="table-condition-items"></slot>
      </div>
    </div>
    <div class="table-content">
      <slot name="table"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "表格"
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/index.scss";

/**
  *列表样式
  */
.table-pannel {
  background: #fff;

  .table-header {
    position: relative;
    background: $--color-primary;
    color: #fff;
    height: 45px;
    line-height: 45px;
    text-indent: 1em;

    .table-header-tools {
      position: absolute;
      right: 10px;
      top: 0;
    }
  }

  .table-tools {
    margin: 10px auto;
    padding: 15px;
    border-radius: 6px;
    background-color: #ffffff;
    @include clear();

    &::after {
      @include clear--after();
    }

    .table-condition {
      float: right;
      padding-bottom: 10px;
      @include clear();

      &::after {
        @include clear--after();
      }

      .table-condition-item {
        label {
          font-size: 14px;
        }

        float: left;
        margin-left: 10px;
      }
    }
  }
  .table-content {
    padding: 20px;
    .el-pagination {
      margin-top: 10px;
      text-align: right;
    }
  }
}
</style>
